<template>
  <div class="data">
    <a-list :grid="{ gutter: [16, 16], lg: 3, xl: 5,xxl:5 }" :data-source="dataList">
      <template #renderItem="{ item, index }">
        <a-list-item>
          <div
            style="
              background: rgba(255, 255, 255, 0.05);
              border: 1px solid #1f2327;
              border-radius: 10px;
              padding: 10px 10px 5px;
              height: 100%;
              color: #fff;
              cursor: pointer;
            "
            @click="clickWord(item.keywords)"
          >
            <!-- <a-statistic> -->
              <!-- <template #keywords> -->
                <div class="ant-statistic-title">
                    <p class="keywords" :style="`background:${colorList[index].color}`">
                      {{ item.keywords }}
                    </p>
                    <span class="txt">词量</span>
                    <span class="value linehidden_1" v-title>{{ checkNum(item.lexical_quantity,1) }}</span>
                    <span class="unit">{{ checkNum(item.lexical_quantity,2) }}</span>
                </div>
              <!-- </template> -->
            <!-- </a-statistic> -->
          </div>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, defineEmits, toRefs } from "vue";
import { bigDataApi } from "@/api/bigData";
import store from "@/store";
onMounted(() => {
  getKeyword();
});
const dataList = ref([]);

const colorList = ref([
  {
    color: "#0071EE"
  },
  {
    color: "#2CCDC5"
  },
  {
    color: "#F5BD5A"
  },
  {
    color: "#FF7940"
  },
  {
    color: "#FE544B"
  }
]);

async function getKeyword() {
  const result = await bigDataApi.keyword({
    token: store.getters.user.token,
    limit: 5
  });
  const { data } = result;
  dataList.value = data.data
  console.log(data.data[0].keywords)
  clickWord(data.data[0].keywords)
}

// 定义派发事件
const emit = defineEmits(['clickKeyWord'])

// 点击词语
function clickWord(word){
  emit('clickKeyWord', word)
}

function checkNum(num,type){
  // console.log(num)
  if(num > 0){
    if(num < 10000){
      return num
    }else{
      if(num < 100000000){
        //单位:万
        if(type == 1){
          const count = Math.floor((num /10000) * 100) / 100
          return count
        }else{
          return '万'
        }
      }else{
        //单位:亿
        if(type == 1){
          const count = Math.floor((num /100000000) * 100) / 100
          return count
        }else{
          return '亿'
        }
      }
    }
  }else{
    if(type == 1){
      return 0
    }else{
      return ''
    }
  }
}
</script>

<style lang="less" scoped>
.data {
  /deep/ .ant-statistic-title {
    color: #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
    .keywords{
      box-shadow: 0px 4px 8px 0px rgba(44,205,197,0.2);
      border-radius: 15px;
      height: 30px;
      line-height: 28px;
      padding: 0 15px;
      margin-right: 15px;
    }
    .title {
      margin-right: 5px;
      font-size: 12px;
      box-shadow: 0px 4px 8px 0px rgba(255, 121, 64, 0.2);
      border-radius: 15px;
      padding: 5px 15px;
      flex-shrink: 0;
    }
    .txt {
      margin-right: 5px;
      font-size: 16px;
      color: #cbd2d5;
      flex-shrink: 0;
    }
    .value {
      margin-left: 10px;
      margin-right: 10px;
      font-size: 24px;
      font-weight: bold;
    }
    .unit {
      font-size: 16px;
    }
  }
  /deep/ .ant-statistic-content {
    display: none;
  }

  /deep/ .ant-list-grid .ant-col > .ant-list-item {
    margin-bottom: 0;
  }
  /deep/ .ant-col {
    height: 100%;
  }
  /deep/ .ant-list-item {
    height: 100%;
  }
}
</style>
